<template>
  <div class="chart-container">
    <div class="chart-title">热门话题</div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  name: 'HotTopicsCloud',
  data() {
    return {
      chart: null,
      topics: [
        { name: '合肥地铁', value: 100 },
        { name: '科大讯飞', value: 80 },
        { name: '合肥新区', value: 70 },
        { name: '滨湖新区', value: 65 },
        { name: '合肥经开区', value: 60 },
        { name: '合肥高新区', value: 55 },
        { name: '合肥房价', value: 50 },
        { name: '合肥天气', value: 45 }
      ]
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      
      const option = {
        series: [{
          type: 'wordCloud',
          shape: 'circle',
          left: 'center',
          top: 'center',
          width: '95%',
          height: '95%',
          right: null,
          bottom: null,
          sizeRange: [12, 24],
          rotationRange: [-90, 90],
          rotationStep: 45,
          gridSize: 6,
          drawOutOfBound: false,
          textStyle: {
            color: function() {
              return 'rgb(' + [
                Math.round(Math.random() * 160) + 95,
                Math.round(Math.random() * 160) + 95,
                Math.round(Math.random() * 160) + 95
              ].join(',') + ')'
            }
          },
          emphasis: {
            textStyle: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: this.topics
        }]
      }
      
      this.chart.setOption(option)
      
      window.addEventListener('resize', () => {
        this.chart && this.chart.resize()
      })
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .chart-title {
    font-size: 16px;
    margin-bottom: 10px;
    flex: 0 0 auto;
  }
  
  .chart {
    flex: 1;
    min-height: 0;
  }
}
</style> 